<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航</title>
		<link rel="shortcut icon" href="img/logo.png" type="image/x-icon"/>
		<!-- 引入BootStrap的核心css文件 -->
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入 -->
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入BootStrap的核心js文件 -->
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background-color: #fafafa;">
		<div class="container">
			<!-- 顶部栏 -->
			<div class="row clearfix">
				<div class="col-md-12 column">
					<div class="jumbotron text-center" style="margin-bottom:0">
					  <h1>导航分选页面</h1>
					  <p class="text-right">只为方便生活！</p>
					</div>
				</div>
			</div>
			<!-- 反色的导航栏 -->
			<div class="row clearfix">
				<div class="col-md-12 column">
					<nav class="navbar navbar-inverse">
					  <div class="container-fluid">
					    <div class="navbar-header">
					      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					      </button>
					      <a class="navbar-brand" href="#">这是一个导航栏</a>
					    </div>
					    <div class="collapse navbar-collapse" id="myNavbar">
						  <ul id="myTab" class="nav navbar-nav">
							<li class="active">
								<a href="#usual" data-toggle="tab">经常使用</a>
							</li>
							<!-- 技术学习下拉列表 -->
							<li class="dropdown">
								<a href="#" id="myTabDrop1" class="dropdown-toggle"
								   data-toggle="dropdown">技术学习 <b class="caret"></b>
								</a>
								<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
									<li><a href="#suanfa" tabindex="-1" data-toggle="tab">
										算法训练</a>
									</li>
									<li><a href="#qianduan" tabindex="-1" data-toggle="tab">
										Web前端</a>
									</li>
									<li><a href="#houduan" tabindex="-1" data-toggle="tab">
										Web后端</a>
									</li>
									<li><a href="#git" tabindex="-1" data-toggle="tab">
										Git</a>
									</li>
									<li><a href="#cyuyan" tabindex="-1" data-toggle="tab">
										C语言</a>
									</li>
									<li><a href="#python" tabindex="-1" data-toggle="tab">
										Python</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#watchVedio" data-toggle="tab">看会视频</a>
							</li>
						  	<li>
						  		<a href="#search" data-toggle="tab">搜点资料</a>
						  	</li>
							<!-- 大学课程分学期下拉列表 -->
						  	<li class="dropdown">
						  		<a href="#" id="myTabDrop1" class="dropdown-toggle"
						  		   data-toggle="dropdown">大学课程 <b class="caret"></b>
						  		</a>
						  		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
						  			<li><a href="#dayishang" tabindex="-1" data-toggle="tab">
						  				大一上</a>
						  			</li>
						  			<li><a href="#dayixia" tabindex="-1" data-toggle="tab">
						  				大一下</a>
						  			</li>
									<li><a href="#daershang" tabindex="-1" data-toggle="tab">
										大二上</a>
									</li>
									<li><a href="#daerxia" tabindex="-1" data-toggle="tab">
										大二下</a>
									</li>
						  		</ul>
						  	</li>
							<!-- 大学课程分学科下拉列表 -->
							<li class="dropdown">
								<a href="#" id="myTabDrop1" class="dropdown-toggle"
								   data-toggle="dropdown">大学课程 <b class="caret"></b>
								</a>
								<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
									<li><a href="#gaoshu" tabindex="-1" data-toggle="tab">
										高等数学</a>
									</li>
									<li><a href="#english" tabindex="-1" data-toggle="tab">
										大学英语</a>
									</li>
									<li><a href="#chengxusheji" tabindex="-1" data-toggle="tab">
										程序设计</a>
									</li>
									<li><a href="#gailvlun" tabindex="-1" data-toggle="tab">
										概率论与数理统计</a>
									</li>
									<li><a href="#xiandai" tabindex="-1" data-toggle="tab">
										线性代数</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#juankuan" data-toggle="tab">热心捐献</a>
							</li>
						  </ul>
					    </div>
						<!-- 注册登录 右浮动 -->
						<ul class="nav navbar-nav navbar-right">
						    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
						    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
						</ul>
						<!-- 导航栏表单 左浮动 -->
						<form class="navbar-form navbar-left" role="search">
						    <div class="form-group">
						        <input type="text" class="form-control" placeholder="Search">
						    </div>
						    <button type="submit" class="btn btn-default">提交</button>
						</form>
					  </div>
					</nav>
				</div>
			</div>
			<div class="row clearfix" >
					<div class="col-md-12 column">
						<div id="myTabContent" class="tab-content">
							<!-- 搜点资料详情页 -->
							<div class="tab-pane fade" id="search">
								<div class="col-md-12 column">
											<div class="row clearfix">
												<!-- 百度 -->
												<div class="col-md-3 column">
														<div>
															<div class="thumbnail">
																<div style="height:288px;">
																	<a href="https://www.baidu.com/" target="_blank">
																		<img decoding="async" src="img/baidu.png"
																		class="img-responsive"
																		alt="百度">
																	</a>
																</div>
															    <div class="caption" style="">
															        <h3 style="text-align: center; margin-top: 0px;">百度</h3>
															        <p style="text-align: center; height: 200px; margin-top: 20px;">
																		<a href="https://www.baidu.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																		    进入官网
																		</a><br>
															            <a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh" target="_blank" class="btn btn-info btn-block btn-lg" role="button"  >
															                百度翻译
															           </a>
															        </p>
															    </div>
															</div>
														</div>
												</div>
												<!-- 百度 -->
												<div class="col-md-3 column">
														<div>
															<div class="thumbnail">
																<div style="height:288px;">
																	<a href="https://www.baidu.com/" target="_blank">
																		<img decoding="async" src="img/baidu.png"
																		alt="百度">
																	</a>
																</div>
															    <div class="caption" style="">
															        <h3 style="text-align: center; margin-top: 0px;">百度</h3>
															        <p style="text-align: center; height: 200px; margin-top: 20px;">
															        	<a href="https://www.baidu.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															        	    进入官网
															        	</a><br>
															            <a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh" target="_blank" class="btn btn-info btn-block btn-lg" role="button"  >
															                百度翻译
															           </a>
															        </p>
															    </div>
															</div>
														</div>
												</div>
												<!-- 百度 -->
												<div class="col-md-3 column">
														<div>
															<div class="thumbnail">
																<div style="height:288px;">
																	<a href="https://www.baidu.com/" target="_blank">
																		<img decoding="async" src="img/baidu.png"
																		alt="百度">
																	</a>
																</div>
															    <div class="caption" style="">
															        <h3 style="text-align: center; margin-top: 0px;">百度</h3>
															        <p style="text-align: center; height: 200px; margin-top: 20px;">
															        	<a href="https://www.baidu.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															        	    进入官网
															        	</a><br>
															            <a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh" target="_blank" class="btn btn-info btn-block btn-lg" role="button"  >
															                百度翻译
															           </a>
															        </p>
															    </div>
															</div>
														</div>
												</div>
												<!-- 百度 -->
												<div class="col-md-3 column">
														<div>
															<div class="thumbnail">
																<div style="height:288px;">
																	<a href="https://www.baidu.com/" target="_blank">
																		<img decoding="async" src="img/baidu.png"
																		alt="百度">
																	</a>
																</div>
															    <div class="caption" style="">
															        <h3 style="text-align: center; margin-top: 0px;">百度</h3>
															        <p style="text-align: center; height: 200px; margin-top: 20px;">
															        	<a href="https://www.baidu.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															        	    进入官网
															        	</a><br>
															            <a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh" target="_blank" class="btn btn-info btn-block btn-lg" role="button"  >
															                百度翻译
															           </a>
															        </p>
															    </div>
															</div>
														</div>
												</div>
											</div>
										</div>
							</div>
							<!-- 看会视频详情页 -->
							<div class="tab-pane fade" id="watchVedio">
									<div class="row clearfix">
										<div class="col-md-12 column">
											<!-- b站 -->
											<div class="col-md-3 column">
													<div>
														<div class="thumbnail">
															<div style="height:288px;">
																<a href="https://www.bilibili.com/" target="_blank">
																	<img decoding="async" src="img/bilibili.png"
																	alt="bilibili">
																</a>
															</div>
														    <div class="caption" style="">
														        <h3 style="text-align: center; margin-top: 0px;">B站官网</h3>
														        <p style="text-align: center;margin-top: 20px; height: 200px;">
																	<a href="https://www.bilibili.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																	    进入官网
																	</a><br>
														            <a href="https://space.bilibili.com/1922505635?spm_id_from=333.999.0.0" target="_blank" class="btn btn-info btn-block btn-lg" role="button"  >
														                个人主页
														           </a>
														        </p>
														    </div>
														</div>
													</div>
											</div>
											<!-- 虎牙 -->
											<div class="col-md-3 column">
													<div>
														<div class="thumbnail">
															<div style="height:288px;">
																<a href="https://www.huya.com/l" target="_blank">
																	<img decoding="async" src="img/huya.png"
																	width="300px"
																	alt="虎牙直播">
																</a>
															</div>
														    <div class="caption" style="">
														        <h3 style="text-align: center; margin-top: 0px;">虎牙直播</h3>
														        <p style="text-align: center;height: 200px; margin-top: 20px;">
																	<a href="https://www.huya.com/l" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																	    进入官网
																	</a><br>
														            <a href="https://www.huya.com/774810"  class="btn btn-warning btn-lg btn-block" role="button"  >
														                看刘伟
														           </a>
														        </p>
														    </div>
														</div>
													</div>
												</div>
											<!-- 优酷视频 -->
											<div class="col-md-3 column">
													<div>
														<div class="thumbnail">
															<div style="height:288px;">
																<a href="https://youku.com/channel/webhome" target="_blank">
																	<img decoding="async" src="img/youku.png"
																	width="200px"
																	alt="优酷">
																</a>
															</div>
														    <div class="caption" style="">
														        <h3 style="text-align: center; margin-top: 0px;">优酷视频</h3>
														        <p style="text-align: center; margin-top: 20px; height: 200px;">
																	<a href="https://youku.com/channel/webhome" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																	    进入官网
																	</a><br>
														            <a href="javascript:void(0)"  class="btn btn-warning btn-lg btn-block" role="button"  >
														                 没想好干啥
														            </a>
														        </p>
														    </div>
														</div>
													</div>
												</div>
											<!-- 腾讯视频 -->
											<div class="col-md-3 column">
													<div>
														<div class="thumbnail">
															<div style="height:288px;">
																<a href="https://v.qq.com/" target="_blank">
																	<img decoding="async" src="img/tengxun.png"
																	alt="腾讯视频">
																</a>
															</div>
														    <div class="caption" style="">
														        <h3 style="text-align: center; margin-top: 0px;">腾讯视频</h3>
														        <p style="text-align: center; margin-top: 20px; height: 200px;">
																	<a href="https://v.qq.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																	    进入官网
																	</a><br>
														            <a href="javascript:void(0)"  class="btn btn-warning btn-lg btn-block" role="button"  >
														                 没想好干啥
														            </a>
														        </p>
														    </div>
														</div>
													</div>
												</div>
										</div>
									</div>
							</div>
							<div class="tab-pane fade" id="dayishang">
								<p>大一上</p>
							</div>
							<div class="tab-pane fade" id="dayixia">
								<p>大一下</p>
							</div>
							<div class="tab-pane fade" id="daershang">
								<p>大二上</p>
							</div>
							<div class="tab-pane fade" id="daerxia">
								<p>大二下</p>
							</div>
							<!-- 主页通常详情页 -->
							<div class="tab-pane fade in active" id="usual">
									<!-- 百度 -->
									<div class="col-md-3 column">
											<div>
												<div class="thumbnail">
													<div class="media">
														<div style="height:288px;" class="media-middle">
														<a href="https://www.baidu.com/" target="_blank">
															<img decoding="async" src="img/baidu.png"
															class="media-object"
															alt="百度">
														</a>
													</div>
													</div>
												    <div class="caption" style="">
												        <h3 style="text-align: center; margin-top: 0px;">百度</h3>
												        <p style="text-align: center; margin-top: 20px; height: 200px;">
															<a href="https://www.baidu.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															    进入官网
															</a><br>
												            <a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
												                百度翻译
												           </a>
												        </p>
												    </div>
												</div>
											</div>
									</div>
									<!-- IP -->
									<div class="col-md-3 column">
											<div>
												<div class="thumbnail">
													<div style="height:288px;">
														<a href="http://ip111.cn/" target="_blank">
															<img decoding="async" src="img/ip.png"
															class="img-responsive"
															alt="查询ip">
														</a>
													</div>
												    <div class="caption" style="">
												        <h3 style="text-align: center; margin-top: 0px;">IP</h3>
												        <p style="text-align: center; margin-top: 20px; height: 200px;">
															<a href="http://ip111.cn/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															    查IP
															</a><br>
												            <a href="javascript:void(0)" class="btn btn-info btn-lg btn-block" role="button"  >
												                无所事事
												           </a>
												        </p>
												    </div>
												</div>
											</div>
									</div>
									<!-- 雨课堂 -->
									<div class="col-md-3 column">
											<div>
												<div class="thumbnail">
													<div style="height:288px;">
														<a href="https://www.yuketang.cn/web/?next=/v2/web/index" target="_blank">
															<img decoding="async" src="img/yuketang.png"
															alt="雨课堂">
														</a>
													</div>
												    <div class="caption" style="">
												        <h3 style="text-align: center; margin-top: 0px;">雨课堂</h3>
												        <p style="text-align: center;margin-top: 20px; height: 200px;">
															<a href="https://www.yuketang.cn/web/?next=/v2/web/index" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															    打开雨课堂
															</a><br>
												            <a href="javascript:void(0)" class="btn btn-info btn-lg btn-block" role="button"  >
												                无所事事
												           </a>
												        </p>
												    </div>
												</div>
											</div>
									</div>
									<!-- 油猴 -->
									<div class="col-md-3 column">
											<div>
												<div class="thumbnail">
													<div style="height:288px;">
														<a href="https://greasyfork.org/zh-CN" target="_blank">
														<img decoding="async" src="img/youhou.png"
														alt="油猴">
													</a>
													</div>
												    <div class="caption" style="">
												        <h3 style="text-align: center; margin-top: 0px;">油猴</h3>
												        <p style="text-align: center;margin-top: 20px; height: 200px;">
															<a href="https://greasyfork.org/zh-CN" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															    打开油猴
															</a><br>
												            <a href="javascript:void(0)" class="btn btn-info btn-lg btn-block" role="button"  >
												                无所事事
												           </a>
												        </p>
												    </div>
												</div>
											</div>
									</div>
									<!-- iconfont -->
									<div class="col-md-3 column">
											<div>
												<div class="thumbnail">
													<div style="height:288px;">
														<a href="https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a" target="_blank">
														<img decoding="async" src="img/iconfont.png"
														alt="iconfont">
													</a>
													</div>
												    <div class="caption" style="">
												        <h3 style="text-align: center; margin-top: 0px;">阿里巴巴矢量图标库</h3>
												        <p style="text-align: center;margin-top: 20px; height: 200px;">
															<a href="https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															    打开iconfont
															</a><br>
												            <a href="javascript:void(0)" class="btn btn-info btn-lg btn-block" role="button"  >
												                无所事事
												           </a>
												        </p>
												    </div>
												</div>
											</div>
									</div>
									<!-- 智慧树 -->
									<div class="col-md-3 column">
											<div>
												<div class="thumbnail">
													<div style="height:288px;">
														<a href="https://passport.zhihuishu.com/login?service=https://onlineservice-api.zhihuishu.com/gateway/f/v1/login/gologin#qrCodeLogin" target="_blank">
														<img decoding="async" src="img/zhihuishu.png"
														alt="智慧树">
													</a>
													</div>

												    <div class="caption" style="">
												        <h3 style="text-align: center; margin-top: 0px;">智慧树</h3>
												        <p style="text-align: center;margin-top: 20px; height: 200px;">
															<a href="https://passport.zhihuishu.com/login?service=https://onlineservice-api.zhihuishu.com/gateway/f/v1/login/gologin#qrCodeLogin" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															    打开智慧树
															</a><br>
												            <a href="javascript:void(0)" class="btn btn-info btn-lg btn-block" role="button"  >
												                无所事事
												           </a>
												        </p>
												    </div>
												</div>
											</div>
									</div>
									<!-- chatgpt -->
									<div class="col-md-3 column">
											<div>
												<div class="thumbnail">
													<div style="height:288px;">
														<a href="https://chat.openai.com/auth/login?next=/chat" target="_blank">
															<img decoding="async" src="img/chatgpt.png"
															alt="chatgpt">
														</a>
													</div>
												    <div class="caption" style="">
												        <h3 style="text-align: center; margin-top: 0px;">ChatGPT</h3>
												        <p style="text-align: center;margin-top: 20px; height: 200px;">
															<a href="https://chat.openai.com/auth/login?next=/chat" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
															    打开ChatGPT
															</a><br>
												            <a href="javascript:void(0)" class="btn btn-info btn-lg btn-block" role="button"  >
												                无所事事
												           </a>
												        </p>
												    </div>
												</div>
											</div>
									</div>
							</div>
							<!-- 算法训练详情页 -->
							<div class="tab-pane fade" id="suanfa">
								<div class="row clearfix">
									<div class="col-md-12 column">
										<!-- 牛客网 -->
										<div class="col-md-3 column">
												<div>
													<div class="thumbnail">
														<div style="height:288px;">
															<a href="https://www.nowcoder.com/" target="_blank">
															<img decoding="async" src="img/niuke.png"
															alt="牛客网">
														</a>
														</div>
													    <div class="caption" style="">
													        <h3 style="text-align: center; margin-top: 0px;">牛客网</h3>
													        <p style="text-align: center;margin-top: 20px; height: 200px;">
																<a href="https://www.nowcoder.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																    进入官网
																</a><br>
													            <a href="https://www.nowcoder.com/exam/oj?tab=%E8%AF%AD%E6%B3%95%E7%AF%87&topicId=290" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
													                基础算法
													           </a><br>
															   <a href="https://www.nowcoder.com/exam/oj/ta?tpId=37" target="_blank" class="btn btn-danger btn-lg btn-block" role="button"  >
															        进阶算法
															   </a>
													        </p>
													    </div>
													</div>
												</div>
										</div>
										<!-- 炼码 -->
										<div class="col-md-3 column">
												<div>
													<div class="thumbnail">
														<div style="height:288px;">
															<a href="https://www.lintcode.com/" target="_blank">
															<img decoding="async" src="img/lintcode.png"
															width="300px"
															alt="lintcode炼码">
														</a>
														</div>
													    <div class="caption" style="">
													        <h3 style="text-align: center; margin-top: 0px;">LintCode 炼码</h3>
													        <p style="text-align: center;margin-top: 20px; height: 200px;">
																<a href="https://www.lintcode.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																    进入官网
																</a><br>
													            <a href="javascript:void(0)"  class="btn btn-warning btn-lg btn-block" role="button"  >
													                没想好干啥
													           </a>
													        </p>
													    </div>
													</div>
												</div>
											</div>
										<!-- 力扣 -->
										<div class="col-md-3 column">
												<div>
													<div class="thumbnail">
														<div style="height:288px;">
															<a href="https://leetcode.cn/" target="_blank">
															<img decoding="async" src="img/leetcode.png"
															width="200px"
															alt="leetcode力扣">
														</a>
														</div>
													    <div class="caption" style="">
													        <h3 style="text-align: center; margin-top: 0px;">leetcode力扣</h3>
													        <p style="text-align: center;margin-top: 20px; height: 200px;">
																<a href="https://leetcode.cn/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																    进入官网
																</a><br>
													            <a href="javascript:void(0)"  class="btn btn-warning btn-lg btn-block" role="button"  >
													                 没想好干啥
													            </a>
													        </p>
													    </div>
													</div>
												</div>
											</div>
										<!-- CSDN -->
										<div class="col-md-3 column">
												<div>
													<div class="thumbnail">
														<div style="height:288px;">
															<a href="https://www.csdn.net/" target="_blank">
																<img decoding="async" src="img/CSDN.png"
																alt="CSDN">
															</a>
														</div>
													    <div class="caption" style="">
													        <h3 style="text-align: center; margin-top: 0px;">CSDN</h3>
													        <p style="text-align: center;margin-top: 20px; height: 200px;">
																<a href="https://www.csdn.net/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
																    进入官网
																</a><br>
													            <a href="javascript:void(0)"  class="btn btn-warning btn-lg btn-block" role="button"  >
													                 没想好干啥
													            </a>
													        </p>
													    </div>
													</div>
												</div>
											</div>
									</div>
								</div>
							</div>
							<!-- 前端技术详情页 -->
							<div class="tab-pane fade" id="qianduan">
								<!-- HTML -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="javascript:void(0)">
													<img decoding="async" src="img/HTML.png"
													width="200px"
													alt="HTML">
												</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">HTML</h3>
										        <p style="text-align: center; margin-top: 20px; height: 250px;">
													<a href="https://www.w3school.com.cn/tags/html_ref_byfunc.asp" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
													    W3School帮助文档
													</a><br>
										            <a href="https://www.runoob.com/html/html-tutorial.html" target="_blank" class="btn btn-info btn-lg btn-block" role="button" >
										                HTML菜鸟教程
										           </a><br>
												   <a href="https://www.bilibili.com/video/BV14J4114768?p=1&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-danger btn-lg btn-block" role="button" >
												        B站Pink老师课程
												   </a><br>
												   <a href="https://www.runoob.com/w3cnote/es6-concise-tutorial.html" target="_blank" class="btn btn-success btn-lg btn-block" role="button" >
												        ECMAScript6菜鸟教程
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- CSS -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="javascript:void(0)">
												<img decoding="async" src="img/css.png"
												width="200px"
												alt="CSS">
												</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">CSS</h3>
										        <p style="text-align: center;margin-top: 20px; height: 250px;">
										            <a href="https://www.runoob.com/css/css-tutorial.html" target="_blank" class="btn btn-info btn-lg btn-block" role="button" >
										                CSS菜鸟教程
										           </a><br>
												   <a href="https://www.bilibili.com/video/BV14J4114768/?p=250&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-danger btn-lg btn-block" role="button"  >
												        B站Pink老师CSS高级
												   </a><br>
												   <a href="https://blog.csdn.net/u014424282/article/details/72827709" target="_blank" class="btn btn-success btn-lg btn-block" role="button" >
												        标签属性大全
												   </a><br>
												   <a href="D:\Typora文件\前端/CSS.md" target="_blank" class="btn btn-warning btn-lg btn-block" role="button" >
												        帅哥笔记(可惜打不开)
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- JavaScript -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="javascript:void(0)">
												<img decoding="async" src="img/js.png"
												width="200px"
												alt="JavaScript">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">JavaScript</h3>
										        <p style="text-align: center;margin-top: 20px; height: 250px;">
										            <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
										                教程 By MDN
										           </a><br>
												   <a href="https://www.runoob.com/js/js-tutorial.html" target="_blank" class="btn btn-danger btn-lg btn-block" role="button"  >
												        JS菜鸟教程
												   </a><br>
												   <a href="https://blog.csdn.net/Augenstern_QXL/article/details/119249534" target="_blank" class="btn btn-primary btn-lg btn-block" role="button"  >
												        JS笔记 For Pink老师课程
												   </a><br>
												   <a href="https://www.bilibili.com/video/BV1Sy4y1C7ha/?p=266&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
												        B站Pink老师课程
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- BootStrap -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="https://www.bootcss.com/" target="_blank">
												<img decoding="async" src="img/bootstrap.png"
												width="200px"
												alt="Bootstrap">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">Bootstrap</h3>
										        <p style="text-align: center;margin-top: 20px; height: 250px;">
										            <a href="https://www.bootcss.com/" target="_blank" class="btn btn-warning btn-lg btn-block" role="button"  >
										                中文网官网
										           </a><br>
												   <a href="https://v3.bootcss.com/" target="_blank" class="btn btn-primary btn-lg btn-block " role="button"  >
												        Bootstrap3文档
												   </a><br>
												   <a href="https://www.runoob.com/try/bootstrap/layoutit/#" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
												        栅格系统代码生成
												   </a><br>
												   <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
												        Bootstrap菜鸟教程
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- ECharts -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="https://echarts.apache.org/zh/index.html" target="_blank">
												<img decoding="async" src="img/echarts.png"
												alt="ECharts">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">开源可视化图表库</h3>
										        <p style="text-align: center;margin-top: 20px; height: 250px;">
										            <a href="https://echarts.apache.org/zh/index.html" target="_blank" class="btn btn-primary btn-lg btn-block" role="button"  >
										                打开官网
										           </a><br>
												   <a href="https://www.bilibili.com/video/BV1ap4y1q7JV/?p=15&spm_id_from=pageDriver&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
												        B站教程
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- JQuery -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="https://jquery.com/" target="_blank">
												<img decoding="async" src="img/JQuery.png"
												alt="JQuery">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">JQuery</h3>
										        <p style="text-align: center;margin-top: 20px; height: 250px;">
										            <a href="https://jquery.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button"  >
										                打开官网
										           </a><br>
												   <a href="https://www.bilibili.com/video/BV1oT4y1u7FS/?p=2&spm_id_from=pageDriver&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
												        B站教程
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
							</div>
							<!-- 后端技术详情页 -->
							<div class="tab-pane fade" id="houduan">
								<div class="col-md-12 column">
								<!-- Java -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="javascript:void(0)">
												<img decoding="async" src="img/Java.png"
												width="200px"
												alt="Java">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">Java</h3>
										        <p style="text-align: center; height: 350px; margin-top: 20px;">
										            <a href="https://www.runoob.com/java/java-tutorial.html" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
										                菜鸟教程
										           </a><br>
												   <a href="https://www.nowcoder.com/exam/oj?tab=%E8%AF%AD%E6%B3%95%E7%AF%87&topicId=220" target="_blank" class="btn btn-danger btn-lg btn-block" role="button"  >
												        牛客网刷题
												   </a><br>
												   <a href="https://www.bilibili.com/video/BV1Rx411876f/?p=725&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-primary btn-lg btn-block" role="button"  >
												        老杜教学视频
												   </a><br>
												   <a href="https://www.bilibili.com/video/BV1Bt41137iB/?p=3&spm_id_from=pageDriver&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
												        JDBC视频
												   </a><br>
												   <a href="https://www.bilibili.com/video/BV1Z3411C7NZ/?spm_id_from=333.337.search-card.all.click&vd_source=fe3e0d943a2c975de42dda2207cb5496" target="_blank" class="btn btn-warning btn-block btn-lg" role="button"  >
												        老杜JavaWeb
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- Spring -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="https://spring.io/" target="_blank">
												<img decoding="async" src="img/spring.png"
												alt="Spring">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">Spring</h3>
										        <p style="text-align: center;height: 350px; margin-top: 20px;">
										            <a href="https://spring.io/" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
										                打开官网
										           </a><br>
												   <a href="javascript:void(0)" class="btn btn-success btn-lg btn-block" role="button"  >
												        老杜Spring6视频
												   </a><br>
												   <a href="javascript:void(0)" class="btn btn-warning btn-lg btn-block" role="button"  >
												        SpringMVC
												   </a><br>
												   <a href="https://docs.spring.io/spring-framework/docs/4.3.24.RELEASE/spring-framework-reference/html/" target="_blank" class="btn btn-danger btn-lg btn-block" role="button"  >
												        4.3.24老版本Spring官方文档
												   </a><br>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- Mybatis -->
								<div class="col-md-4 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="https://mybatis.net.cn/" target="_blank">
												<img decoding="async" src="img/mybatis.png"
												width="200px"
												alt="Mybatis">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">Mybatis</h3>
										        <p style="text-align: center;height: 350px; margin-top: 20px;">
										            <a href="https://mybatis.net.cn/" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
										                中文官网
										           </a><br>
												   <a href="javascript:void(0)" class="btn btn-success btn-lg btn-block" role="button"  >
												        老杜Mybatis视频
												   </a><br>
												   <a href="javascript:void(0)" class="btn btn-warning btn-lg btn-block" role="button"  >
												        MybatisPlus
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								</div>
								<div class="col-md-12 column">
									<!-- SpringBoot -->
									<div class="col-md-4 column">
										<div>
											<div class="thumbnail">
												<div style="height:288px;">
													<a href="https://spring.io/projects/spring-boot" target="_blank">
													<img decoding="async" src="img/springboot.png"
													width="200px"
													alt="SpringBoot">
												</a>
												</div>
											    <div class="caption" style="">
											        <h3 style="text-align: center; margin-top: 0px;">SpringBoot</h3>
											        <p style="text-align: center;height: 350px; margin-top: 20px;">
											            <a href="https://spring.io/projects/spring-boot" target="_blank" class="btn btn-primary btn-lg btn-block" role="button"  >
											                打开官网
											           </a><br>
													   <a href="javascript:void(0)" class="btn btn-success btn-lg btn-block" role="button"  >
													        老杜SpringBoot视频
													   </a><br>
													   <a href="javascript:void(0)" class="btn btn-warning btn-lg  btn-block" role="button"  >
													        没啥好写的
													   </a>
											        </p>
											    </div>
											</div>
										</div>
									</div>
									<!-- RuoYi -->
									<div class="col-md-4 column">
										<div>
											<div class="thumbnail">
												<div style="height:288px;">
													<a href="http://ruoyi.vip/" target="_blank">
													<img decoding="async" src="img/ruoyi.png"
													alt="RuoYi">
												</a>
												</div>
											    <div class="caption" style="">
											        <h3 style="text-align: center; margin-top: 0px;">若依RuoYi</h3>
											        <p style="text-align: center;height: 350px; margin-top: 20px;">
											            <a href="http://ruoyi.vip/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button"  >
											                打开官网
											           </a><br>
													   <a href="http://doc.ruoyi.vip/ruoyi/" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
													        帮助文档
													   </a><br>
													   <a href="http://localhost/RuoYi-fast/login" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
													        农业财务系统
													   </a><br>
													   <a href="http://localhost/RuoYi/index" target="_blank" class="btn btn-warning btn-lg btn-block" role="button"  >
													        前后端分离版后台
													   </a>
											        </p>
											    </div>
											</div>
										</div>
									</div>
									<!-- Maven -->
									<div class="col-md-4 column">
										<div>
											<div class="thumbnail">
												<div style="height:288px;">
													<a href="https://maven.apache.org/" target="_blank">
													<img decoding="async" src="img/maven.png"
													alt="Maven">
												</a>
												</div>
											    <div class="caption" style="">
											        <h3 style="text-align: center; margin-top: 0px;">Maven</h3>
											        <p style="text-align: center;height: 350px; margin-top: 20px;">
											            <a href="https://maven.apache.org/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button"  >
											                打开官网
											           </a><br>
													   <a href="https://mvnrepository.com/" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
													        远程仓库
													   </a>
											        </p>
											    </div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- C语言 -->
							<div class="tab-pane fade" id="cyuyan">
								<!-- 进度条 -->
								<div class="progress progress-striped active">
								    <div class="progress-bar progress-bar-success" role="progressbar"
								         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
								         style="width: 40%;">
								        40% 完成
								    </div>
								</div>
							</div>
							<!-- Python -->
							<div class="tab-pane fade" id="python">
								<p>Python</p>
							</div>
							<!-- Git -->
							<div class="tab-pane fade" id="git">
								<div class="col-md-6 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="https://github.com/" target="_blank">
												<img decoding="async" src="img/github.png"
												alt="GitHub">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">GitHub</h3>
										        <p style="text-align: center;height: 200px; margin-top: 20px;">
													<a href="https://github.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
													    进入官网
													</a><br>
										            <a href="https://docs.github.com/zh/get-started/quickstart/hello-world" target="_blank" class="btn btn-info btn-lg btn-block" role="button"  >
										                帮助文档
										           </a><br>
												   <a href="https://github.com/Feng395?tab=repositories" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
												        我的仓库
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- Gitee -->
								<div class="col-md-6 column">
									<div>
										<div class="thumbnail">
											<div style="height:288px;">
												<a href="https://gitee.com/" target="_blank">
												<img decoding="async" src="img/gitee.png"
												alt="Gitee">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 0px;">Gitee</h3>
										        <p style="text-align: center;height: 200px; margin-top: 20px;">
													<a href="https://gitee.com/" target="_blank" class="btn btn-primary btn-lg btn-block" role="button">
													    进入官网
													</a><br>
												   <a href="https://gitee.com/dashboard/projects" target="_blank" class="btn btn-success btn-lg btn-block" role="button"  >
												        我的仓库
												   </a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
							</div>
							<!-- 高数 -->
							<div class="tab-pane fade" id="gaoshu">
								<p>高数</p>
							</div>
							<!-- 英语 -->
							<div class="tab-pane fade" id="english">
								<p>English</p>
							</div>
							<!-- 程序设计 -->
							<div class="tab-pane fade" id="chengxusheji">
								<p>程序设计</p>
							</div>
							<!-- 概率论 -->
							<div class="tab-pane fade" id="gailvlun">
								<p>概率论</p>
							</div>
							<!-- 线代 -->
							<div class="tab-pane fade" id="xiandai">
								<p>线代</p>
							</div>
							<!-- 热心捐款 -->
							<div class="tab-pane fade" id="juankuan">
								<!-- 微信 -->
								<div class="col-md-6 column">
									<div>
										<div class="thumbnail">
											<div style="height:258px;">
												<a href="javascript:void(0)">
												<img decoding="async" src="img/weixinfukuan.jpg"
												width="180px"
												alt="热心捐款">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 30px;">使用微信打赏</h3>
										        <p style="text-align: center;height: 100px; margin-top: 20px;">
													<a href="javascript:void(0)" class="btn btn-primary btn-lg btn-block" role="button" onclick="alert("感谢大哥!")">
													    随手仍张50元
													</a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
								<!-- 支付宝捐款 -->
								<div class="col-md-6 column">
									<div>
										<div class="thumbnail">
											<div style="height:258px;">
												<a href="javascript:void(0)">
												<img decoding="async" src="img/zhifubaofukuan.jpg"
												width="180px"
												alt="热心捐款">
											</a>
											</div>
										    <div class="caption" style="">
										        <h3 style="text-align: center; margin-top: 30px;">使用支付宝打赏</h3>
										        <p style="text-align: center;height: 100px; margin-top: 20px;">
													<a href="javascript:void(0)" class="btn btn-primary btn-lg btn-block" role="button" onclick="alert("感谢大哥!")">
													    随手仍张50元
													</a>
										        </p>
										    </div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			<!-- 页面底部 -->
			<div class="row clearfix">
					<div class="col-md-12 column">
						<div class="jumbotron " style="margin-bottom:0">
						  <div class="row clearfix">
						  				<div class="col-md-10 column">
						  				</div>
						  				<div class="col-md-2 column text-right"style="margin-top:50px; margin: bottom 0px;">
											<p style="font-size: 10px;">© 2023 Chen All Rights Reserved</p>
						  				</div>
						  			</div>
						</div>
					</div>
			</div>
		</div>
		<script>
			$(function () {
				$('#myTab li:eq(1) a').tab('show');
			});
		</script>
	</body>
</html>
